<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<% //弹出层操作 %>
<link href="/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="/css/layer.css" rel="stylesheet" type="text/css" />

<div class="hw-overlay" id="hw-layer">
				<div class="hw-layer-wrap">
					<span class="glyphicon glyphicon-remove hwLayer-close">X</span>
					<div class="row">
						<div class="col-md-9 col-sm-12">
							<div class="js-oper-html">
								<h4>你确定吗？</h4>
								<p>这是HTML+CSS+Javascript实现的一个弹出层效果，它是响应式的，它可以在所有现代浏览器上工作（包括PC和移动端）。</p>
							</div>
							<button class="btn btn-success hwLayer-ok">确 定</button>
							<button class="btn btn-warning hwLayer-cancel">取 消</button>
						</div>
					</div>
				</div>
			</div>
<script type="text/javascript">
<!--
//展示层
function showLayer(){
	var layer = $('#hw-layer'),
		  layerwrap = layer.find('.hw-layer-wrap');
	layer.fadeIn();
	//屏幕居中
	layerwrap.css({
		'margin-top': -layerwrap.outerHeight()/2
	});
}

//隐藏层
function hideLayer(){
	$('.hw-overlay').fadeOut();
}
$(document).ready(function(){
	$('.hwLayer-cancel,.hwLayer-close').on('click', function() {
		hideLayer();
	});

	//点击或者触控弹出层外的半透明遮罩层，关闭弹出层
	$('.hw-overlay').on('click',  function(event) {
		if (event.target == this){
			hideLayer();
		}
	});

	//按ESC键关闭弹出层
	$(document).keyup(function(event) {
		if (event.keyCode == 27) {
			hideLayer();
		}
	});
});
//-->
</script>
